<template>
  <div class="departmentDoc">
    <div class="topbar">
      <p>部门</p>
      <el-input
        v-model="department"
        key="wd2"
        @keyup.enter.native="save"
        ref="inp"
      ></el-input>
    </div>

    <div class="operation">
      <el-button type="primary" icon="el-icon-folder-checked" @click="save"
        >保存</el-button
      >
      <el-button icon="el-icon-edit-outline" @click="modification"
        >修改</el-button
      >
      <el-button icon="el-icon-delete" @click="dele">删除</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      height="75vh"
      :default-sort="{ prop: 'roleName', order: 'default-sort' }"
      highlight-current-row
      :header-cell-style="{ background: '#f4f4f4', padding: 0, height: '40px' }"
      :cell-style="{ padding: 0, height: '36px' }"
      @row-click="rowClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="100"> </el-table-column>
      <el-table-column prop="roleName" sortable label="部门"> </el-table-column>
    </el-table>

    <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view>
  </div>
</template>

<script>
import footView from '../../../components/FootView'
import {
  getRoleList,
  insetRole,
  updateRole,
  deleteRole
} from '../../../network/department'

export default {
  name: 'department_doc',
  data() {
    return {
      id: '',
      department: '',
      deleteList: [],
      tableData: [],
      jxQuarter: null
      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
    }
  },
  created() {
    this._getRoleList()

    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
  },
  watch: {
    department(a, b) {
      this.department = a.toUpperCase().trim()
    }
  },
  components: {
    footView
  },
  methods: {
    rowClick(e) {
      this.id = e.id
      this.department = e.roleName
    },
    handleSelectionChange(e) {
      this.deleteList = e
    },
    save() {
      if (!this.department) return
      for (const i of this.tableData) {
        if (i.roleName == this.department) {
          this.$message.error(`${this.department}已存在`)
          return
        }
      }
      insetRole({ roleName: this.department }).then((res) => {
        // console.log(res)
        this.$refs.inp.focus()
        if (res.data.code == 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this._getRoleList()
        } else {
          this.$message.error('保存失败')
        }
      })
    },
    modification() {
      if (this.deleteList.length != 1) {
        this.$message({
          message: '请选择一条要修改的数据',
          type: 'info'
        })
        return
      }
      updateRole({
        id: this.id,
        roleName: this.department
      }).then((res) => {
        // console.log(res)
        this.$refs.inp.focus()
        if (res.data.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this._getRoleList()
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    dele() {
      if (!this.deleteList.length) {
        this.$message({
          message: '请选择要删除的数据',
          type: 'info'
        })
        return
      }
      let idList = []
      this.deleteList.forEach((e) => {
        idList.push(e.id)
      })
      deleteRole({ idList: String(idList) }).then((res) => {
        // console.log(res)
        if (res.data.code == 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this._getRoleList()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    _getRoleList() {
      getRoleList().then((res) => {
        // console.log(res)
        if (res.data.code == 200) {
          this.tableData = res.data.data
          this.department = ''
        }
      })
    }
  }
}
</script>

<style scoped>
.departmentDoc {
  margin-right: 0.5vw;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}

/* 头部 */
.topbar {
  height: 60px;
  display: flex;
  border-bottom: 2px solid #f4f4f4;
}
.topbar p {
  width: auto;
  line-height: 60px;
  margin-right: 10px;
}
.departmentDoc .sle {
  margin-top: 20px;
}

/* 按钮 */
.operation {
  padding: 15px 0;
}

.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
</style>

<style>
.departmentDoc .el-input {
  margin: 15px 16px 0 0;
  width: 160px;
}
.departmentDoc .el-input__inner {
  height: 30px;
  width: 160px;
}
.departmentDoc .el-select {
  width: 120px;
  margin: 15px 16px 0 0;
}
.departmentDoc .el-button {
  padding: 8px 15px;
  margin-right: 12px;
  height: 30px;
}
.departmentDoc .el-button + .el-button {
  margin-left: 0;
}
</style>
